<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>参考链接：https://mp.weixin.qq.com/s/MkdSVj_6j_oZfzBW_1JBxQ</title>
	</head>
	<link rel="stylesheet" type="text/css" href="../../common.css" />
	<style type="text/css">
		@property --t {
			syntax: '<integer>';
			inherits: false;
			initial-value: 0;
		}

		@counter-style stop {
			system: cyclic;
			symbols: "susu!";
			range: infinite 0;
		}

		html,
		body {
			margin: 0;
			height: 100%;
			display: grid;
			place-content: center;
			color: orange;
			background: #222;
		}

		susu {
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: Consolas, Monaco, monospace;
			font-size: 120px;
		}

		susu::after {
			--t: 5;
			--dur: 1;
			counter-reset: time var(--t);
			content: counter(time, stop);
			/* content: counter(time, cjk-decimal); */
			/*中日韩十进制数*/
			animation: count calc(var(--t) * var(--dur) * 1s) steps(var(--t)) forwards,
				shark calc(var(--dur) * 1s) calc(var(--dur) * .8s) calc(var(--t));
		}

		/* 重新运行 */
		susu:active::after {
			animation: none;
		}

		@keyframes count {
			to {
				--t: 0;
			}
		}

		@keyframes shark {

			/* 放大缩小 */
			0% {
				opacity: 1;
				transform: scale(1);
			}

			20% {
				opacity: 0;
				transform: scale(0.4);
			} 
			
			21%{
				opacity: 0;
				transform: scale(1.5);
			}
			
			/* 位移的动画 */
			/* 0% {
				opacity: 1;
				transform: translateY(0);
			}

			20% {
				opacity: 0;
				transform: translateY(100px);
			}

			21% {
				opacity: 0;
				transform: translateY(-100px);
			} */
		}
	</style>
	<body>
		<susu style="--t: 5"></susu>
	</body>
</html>
